<template>
    <div>
        <div class="resume_list">
            <div class="resume_list_item" v-for="(item,index) of resume" :key="index" @click="toresumeDetail(item.id)">
                <div class="resume_top">
                <img :src="item.user_info.photo_url" alt="" class="header" >
                <div class="resume_center">
                    <div>{{item.user_info.realname}}</div>
                    <div>{{item.user_info.sex}}/{{item.age || ''}}岁/{{item.education ||''}}/{{item.work_experience_num ||''}}</div>
                    <div v-show="item.province">意向地区: {{item.province || ''}}</div>
                    <div class="resume_center_bottom" v-show="item.skill_label">
                    <div v-for="(item1,index1) of item.skill_label" :key="index1">{{item1}}</div>
                    </div>
                </div>
                <div class="setTop" v-show="item.set_top==1">置顶</div>
                </div>
                <div class="resume_bottom">
                意向职位：{{item.jobName ||''}}
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'resumeList',
    props:['resume'],
    methods:{
        toresumeDetail(id){
          this.$router.push({name:'resumeDetail',query:{id}})
            // this.$currency.navigateTo(`/pages/resumeDetail/main?id=${id}`)
        }
    },
}
</script>
<style scoped>
    /* 简历列 */
.resume_list{
  background: #eee;
  width: 100%;
  border-top:1px solid #eee;
}
.resume_list_item{
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 10px;
  background: #fff;
  margin-bottom: 20px;
  position: relative;
}
.header{
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin-left: 10px;
  object-fit: cover;
}
.resume_top{
  width: 100%;
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  padding-top: 20px;
}
.resume_center{
  margin-left: 30px
}
.resume_center>div{
  padding:2.5px;
  margin:5px 0;
}
.setTop{
  position: absolute;
  right: 0;
  top:20px;
  height: 100%;
  margin-right: 20px;
  color:red;
  text-align: right;
}
.resume_bottom{
  margin-top:20px;
  width:100%;
  padding:10px;
  border-top:1px solid #eee;
  /* margin-left: 10px; */
}
.resume_center_bottom{
  display: flex;
}
.resume_center_bottom>div{
  padding:2px 5px;
  border-radius: 10px;
  margin-right:10px;
}
.resume_center_bottom>div:nth-child(1){
  background: #fef5da;
  color: #ea994e;
}
.resume_center_bottom>div:nth-child(2){
    background: #daf2fe;
    color: #30a2c8;
}
.resume_center_bottom>div:nth-child(3){
    background: #e4fcdc;
    color: #76af58;
}
.resume_center_bottom>div:nth-child(4){
    background: #ebebeb;
    color: #868686;
}
</style>
